<template>
    <div class="result" v-infinite-scroll="load" infinite-scroll-distance="5">
        <div class="box">
            <div style="width: 100%;height: 10%;display: flex;justify-content: center; align-items: center;"> 
                <div style="width: 40%;">
                    <el-input :placeholder="input_placeholder" v-model="search" @keyup.enter.native="click_search()"><el-link :underline="false" slot="suffix" class="el-icon-search"
                        style="font-size: 150%;margin-top: 10px;margin-right: 10px;" @click="click_search()"></el-link></el-input>
                </div>
            </div>
            <div class="title el-icon-success">搜索结果</div>
            <div class="search_all">总共:{{ search_all }}</div>
            <el-divider></el-divider>
            <div style="width: 100%;display: flex;flex-wrap: wrap;height: 100%;">
                <div class="video1" v-for="video in comics" :key="video.id">
                    <div @click="router_video(video.id)"  style="cursor: pointer;width: 100%; height: 65%;">
                        <el-image style="border-radius: 10px;height: 100%;width: 100%;" :src="video.cover" referrerPolicy='no-referrer'
                            fit="fill"></el-image>
                    </div>
                    <div class="name">
                        <span class="span" @click="router_video(video.id)">{{ video.title }}</span>
                    </div>
                    <div style="font-size: 80%;color: #606266;margin-top: 5px;">
                        <i class="el-icon-user"></i> {{ video.publisherName }} · {{ video.createTime.slice(0,10) }}
                    </div>
                </div>
            </div>           
            <div class="img" v-if="search_all == 0">
                <el-image
                    style="width: 600px;"
                    :src="require('@/assets/image/noresult.png')"
                    fit="fill"></el-image>
            </div>

        </div>
    </div>
</template>

<script>
import UserChatApi from "@/api/user-chat"
import PersonalCenterApi from "@/api/personal-center"
import UserManagementApi from "@/api/user-management"
import VideoPlayApi from "@/api/video-play"
import VideoSearchApi from "@/api/video-search"
export default {
    data(){
        return{
            comics:[],//查询结果
            input_placeholder:'请输入',//搜索框默认文本
            search:'',//搜索框绑定数据
            search_n:1,//搜索结果页数
            search_all:0,//搜索总个数
        }
    },
    methods:{
         //跳转到视频页面
         router_video(id){
            var {href} = this.$router.resolve({
                name:'video',
                query:{
                    id:id
                }
            })
            window.open(href,"_blank");
        },
        //下拉出现新数据
        load(){
            var _this=this
            if(this.search_all >= (this.search_n-1)*12){
                var video = {
                    title:_this.search
                }
                VideoSearchApi.SubmitSearchVideo(_this.search_n,12,video).then(res => {
                    if(res.data.code == 200){
                        _this.comics = _this.comics.concat(res.data.data.records)
                    }
                })
                _this.search_n++
            }else{

            }
            
        },
        //点击搜索按钮
        click_search(){
            this.comics = []
            this.search_n = 1
            this.Search_for()
        },
        //搜索
        Search_for(){
            var _this=this
            var video = {
                title:_this.search
            }
            VideoSearchApi.SubmitSearchVideo(_this.search_n,12,video).then(res => {
                if(res.data.code == 200){
                    _this.comics = _this.comics.concat(res.data.data.records)
                }
            })
            VideoSearchApi.SubmitSearchVideoNum(video).then(res => {
                _this.search_all = res.data.data
            })
            _this.search_n++
        }
      
    },
    created(){
        this.search = this.$route.query.search
        this.Search_for()
    }
};
</script>

<style scoped>
@import "../assets/css/body.css";
.result{
    background-image: url('../assets/image/21.png');
    background-size: cover;
    background-repeat: no-repeat;
    overflow: auto;
    height: 100%;
}
.box{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    width: 70%;
    padding: 30px;
    background-color: rgb(192, 201, 201);
    margin: 0 auto;
}
.title{
    font-size: 200%;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(0, 102, 255);
    margin-bottom: 30px;
}

.video1{
    margin: 1%;
    height: 32vh;
    width: 23%;
}
.name {
    height: 12%;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-family: "PingFang SC", "Hiragino Sans GB";
    font-weight: 800;
    font-size:smaller;
    margin-top: 5%;
}



.img{
    display: flex;
    justify-content: center; /* 水平居中对齐 */
}

div /deep/ .el-input__inner {
    background-color: #F2F6FC;
    border-radius: 10px
}

div /deep/ .el-input__inner:hover {
    background-color: white;
}
.search_all{
    font-size: 100%;
    color: #606266;
}
.span:hover{
    color: #409EFF;
    cursor: pointer;
}
</style>